<template>
  <div class="growing-item">
    <div class="row m-row--no-padding m-row--col-separator-xl">
      <div class="m-widget24" v-for="(item,index) in viewModel" :key="index" :style="'width:'+100/count+'%;border: 1px dashed '+item.bgcolor+';'">
        <div class="m-widget24__item">
          <h4 class="m-widget24__titles">
            {{item.name}}
          </h4><br>
          <span class="m-widget24__desc">
            {{item.intro}}
          </span>
          <span class="m-widget24__stats m--font-brand">
            <div class="single-value" v-if="async">
              <el-button :loading="loadingSave">
                <span :style="'color:'+color+';'+'font-size:'+item.icon.size+'px;'+'font-weight:'+item.icon.fontWeight+';'">34563463463</span>
              </el-button>
            </div>
            <!-- ￥<single-value :widget="item.count" :color="item.color" :size="20" :fontWeight="600"></single-value> -->
          </span>
          <div class="m--space-10"></div>
          <div class="progress m-progress--sm">
            <div class="progress-bar m--bg-brand" :style="`width: ${(((item.value*(index+1)*0.1)/item.value)*100)}%;background-color: ${item.bgcolor};`"></div>
          </div>
          <div class="numerical-value">
            <div class="numerical-value_text">已使用{{item.value}}元</div>
            <div class="m-widget24__numbers" v-if="item.value">
              {{(((item.value*(index+1)*0.1)/item.value)*100).toFixed(2)}}%
            </div>
            <div class="m-widget24__numbers" v-else>
              0.00%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        async: false
      }
    },
    props: {
      viewModel: {},
      count: {
        default: 4
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "./style.scss";
</style>

